<template>
  <div>
    <el-card v-for="item in list" shadow="hover">
      <div slot="header">
        <template>
          <b>订单编号：</b>{{item.orderNo}}
          <el-button v-if="item.payStatus===1" @click="del(item.id)" style="float: right; padding: 3px 0" icon="el-icon-delete" type="text">删除</el-button>
<!--          <el-button @click="showCode(item)" style="float: right; padding: 3px 0" icon="el-icon-map-location" type="text">查看取件码</el-button>-->
          <el-button v-else @click="pay(item)" style="float: right; padding: 3px 0" icon="el-icon-s-release" type="text">支付</el-button>
        </template>
      </div>
      <div>
        <el-table :data="item.orderItems" style="width: 100%">
          <el-table-column label="商品名" align="center" prop="name" />
          <el-table-column label="价格" align="center" prop="unitPrice" />
          <el-table-column label="数量" align="center" prop="num" />
          <el-table-column prop="createTime" label="创建时间"/>
        </el-table>
      </div>
      <p style="display:flex;">
        <dict-tag :options="dict.type.pay_status" :value="item.payStatus"/>
<!--        <el-tag size="mini" :type="item.status==='已退票'?'info':''">{{ item.status }}</el-tag>-->
        <span class="price">￥ {{ item.totalPrice }} 元</span>
      </p>
    </el-card>
  </div>
</template>

<script>
import {delOrders, listOrders} from "@/api/system/orders";
import {mapGetters} from "vuex";


export default {
  name: "order",
  dicts: ['pay_status'],
  data () {
    return {
      list: [],
    }
  },
  computed: {
    ...mapGetters([
      'userId',
    ])
  },
  methods:{
    del(id) {
      delOrders(id).then(res => {
        this.$modal.msgSuccess(res.msg);
        this.listOrder()
      })
    },
    pay({id}) {
      this.$router.push({
        path: "/fm/settlement",
        query: {id}
      });
    },
    listOrder() {
      listOrders({
        userId:this.userId
      }).then(({rows})=>{
        this.list=rows
      })
    },
  },
  created() {
    this.listOrder()
  }
}
</script>

<style scoped>
.price {
  color: orange;
  font-weight: bold;
  font-size: 20px;
  margin-right: 30px;
}
</style>
